Ext.define('Sencha.view.PhraseFormView', {
    extend: 'Ext.Container',
    xtype: 'phraseformview',
           
    config: {
        title: 'Phrase',
        styleHtmlContent: true,
        scrollable: 'vertical'
    },   
	
    initialize: function () {
    	this.callParent(arguments);        
        
        // Form for entering dictionary entry info.
        var fieldSet = {
	        xtype: 'fieldset',
	        id: 'phraseFormFieldSet',
	        items: [
	            {
	                xtype: 'textfield',
	                name : 'sourcephrase',
	                label: 'English Phrase',
                    id: 'sourcePhraseField'
	            },
	            {
	                xtype: 'textfield',
	                name : 'targetphrase',
	                label: 'Iwaidja Phrase',
                    id: 'targetPhraseField'
	            },
	            {
	                xtype: 'textfield',
	                name : 'orthography',
	                label: 'Orthography',
	                id: 'orthographyField'
	            },
                {
	                xtype: 'textfield',
	                name : 'note',
	                label: 'Note',
	                id: 'noteField'
	            },
                {
                	xtype: 'hiddenfield',
                	name: 'speakerIdField',
                	id: 'speakerIdField'
                },
                {
                	xtype: 'hiddenfield',
                	name: 'collectorIdField',
                	id: 'collectorIdField'
                }
	        ]
           };
       
       var metadataContainer = {
       		xtype: 'container',
       		layout: 'hbox',
       		
       		items:[
       			{
       				xtype: 'label',
       				html: 'Metadata'
       			},
       			{
       				xtype: 'spacer'
       			},
       			{
       				xtype: 'button',
       				text: 'Metadata',
       				id: 'phraseMetadataButton'
       			}
       		]
       };
       	
        // Image button - used to add images via camera
        var imageButton = {
           xtype: 'button',
           text: 'Add Photo',
           cls: 'addImageButtonCls',
           id: 'addImageButton'
        };
         
        /*
        // Record button - used to record audio
        var audioRecordButton = {
           xtype: 'button',
           //text: 'Rec',
           cls: 'audioRecordButtonCls'        
        };
        */
        var soundRecorder = {
           xtype: 'soundrecorder',
           cls: 'audioRecordButtonCls'
        };
        
        var deleteContainer = {
            xtype: 'container',
            layout: 'hbox',
            items:[
                {
                    xtype: 'button',
                    text: 'Delete',
                    id: 'deletePhraseButton'
                }
            ]
        };
          
        this.add([soundRecorder, fieldSet, metadataContainer, imageButton, deleteContainer]); 
    }

});